<template>
  <view class="containerBox">
    <view class="questionBox">
      <view class="touxiangBox">
        <image src="https://z3.ax1x.com/2021/04/22/cL9yrQ.png">
        </image>
      </view>
      <view class="messageBox animate__animated animate__slideInRight">你是哪个小可爱？
        <view class="sanjiao"></view>
      </view>
    </view>
    <view class="tabBox">
      <view v-for="item in peopleList"
            :key="item.src"
            @tap="tapName(item.name)"
            class="tabName animate__animated animate__backInUp">
        <image class="peopleImg"
               :src="item.src">
        </image>
        {{item.name}}
      </view>
    </view>
    <view class="other">
      <view v-if="showOther"
            @tap="tapName('都不是')"
            class="otherBtn animate__animated animate__slideInRight"
            :class="{isTap:isTap}">都不是
      </view>
    </view>

  </view>

</template>

<script>
export default {
  data() {
    return {
      showOther: false,
      isTap: false,
      chooseName: "",
      peopleList: [
        { src: "https://s1.ax1x.com/2022/05/12/OBjNAe.png", name: "慧慧" },
        { src: "https://s1.ax1x.com/2022/05/12/OBjY7D.png", name: "敏敏" },
        { src: "https://s1.ax1x.com/2022/05/12/OBjJ0O.png", name: "秋秋" },
        { src: "https://s1.ax1x.com/2022/05/12/OBjGnK.png", name: "江荧" },
        { src: "https://s1.ax1x.com/2022/05/12/OBj3X6.png", name: "秋燕" },
      ],
    };
  },
  onUnload() {},
  onLoad() {
    setTimeout(() => {
      this.showOther = true;
    }, 2000);
  },

  onShow() {
    console.log("show");
  },

  methods: {
    tapName(name) {
      this.chooseName = name;
      console.log("name", this.chooseName);
      uni.navigateTo({
        url: "/pages/selfpage/selfpage?name=" + name,
      });
    },
  },
};
</script>

<style>
.peopleImg {
  width: 100upx;
  height: 100upx;
}
.containerBox {
  position: relative;
  background: pink;
  flex: 1;
  width: 750upx;
  margin: 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.questionBox {
  width: 680upx;
  height: 180upx;
  margin-bottom: 40upx;
  /* background-color: rgb(193, 193, 255); */
  display: flex;
  align-items: center;
}
.touxiangBox {
  width: 140upx;
  height: 140upx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 25upx;
}
.touxiangBox image {
  width: 140upx;
  height: 140upx;
}
.messageBox {
  position: relative;
  width: 300upx;
  height: 90upx;
  line-height: 90upx;
  padding: 0 20upx;
  border-radius: 10upx;
  background-color: rgba(255, 255, 255, 1);
}
.sanjiao {
  width: 0;
  height: 0;
  border: 20upx solid transparent;
  border-right-color: rgba(255, 255, 255, 1);
  position: absolute;
  left: -35upx;
  top: 50%;
  transform: translateY(-50%);
}

/*-----------------名字标签*/
.tabBox {
  width: 680upx;
  height: 400upx;
  /* background-color: antiquewhite; */
  position: relative;
  display: flex;
  justify-content: space-between;
}
.tabName {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 120upx;
  height: 300upx;
  border-radius: 10upx;
  background-color: rgb(255, 255, 255);
  box-shadow: 7rpx 10rpx 16rpx -2rpx rgb(62, 62, 62);
  /* animation: move 1s ease-in infinite; */
}

.tabBox > .tabName:nth-child(odd) {
  align-self: flex-end;
}

.other {
  width: 680upx;
  height: 100upx;
  /* background-color: aqua; */
  margin-top: 100upx;
  justify-content: center;
  align-items: center;
}
.otherBtn {
  /* border: 1px solid black; */
  background-color: rgb(221, 136, 150);
  width: 300upx;
  height: 80upx;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 80upx;
}
/* .isTap {
  animation: suoxiao 1s linear;
  animation-fill-mode: backwards;
} */
@keyframes suoxiao {
  from {
  }
  to {
    box-shadow: 7rpx 10rpx 16rpx -2rpx rgb(62, 62, 62);
  }
}
</style>
